<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/view-design/4.7.0/styles/iview.css" />
  <link rel="stylesheet" type="text/css" href="http://www.ajaxjs.com/public/common.css" />
  <link rel="stylesheet" type="text/css" href="http://www.ajaxjs.com/public/admin.css" />

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/view-design/4.7.0/iview.min.js"></script>
  <script src="http://www.ajaxjs.com/public/common.js"></script>
  <style>
    body {
      padding: 2%;
    }
  </style>
</head>

<body>
  <h2>系统摘要</h2>

  <div id="system">
    <div class="holder">
      <i-button type="primary" @click="load">刷新</i-button>
    </div>

    <div class="holder circle">
      <div>
        <i-Circle :percent="data.cupInfo.systemPercent * 100" :size="180">
          <span class="demo-Circle-inner" style="font-size:24px">
            {{data.cupInfo.systemPercent * 100}}%
            <br />
            <span style="font-size:16px">CPU</span>
          </span>
        </i-Circle>
      </div>
      <div>
        <i-Circle :percent="data.memoryInfo.usePercent * 100" :size="180">
          <span class="demo-Circle-inner" style="font-size:24px">
            {{(data.memoryInfo.usePercent * 100).toFixed(2) + '%'}}
            <br />
            <span style="font-size:16px">内存</span>
          </span>
        </i-Circle>
      </div>
      <div>
        <i-Circle :percent="data.diskUsePercent" :size="180">
          <span class="demo-Circle-inner" style="font-size:24px">
            {{data.diskUsePercent}}%
            <br />
            <span style="font-size:16px">磁盘</span>
          </span>
        </i-Circle>
      </div>
    </div>
    <br />
    <br />
    <h2>磁盘状态</h2>
    <div class="holder list">
      <div>
        /dev/dd
        <Progress :percent="25" />
        3.34GB 可用，共 200GB
      </div>
      <div>
        /dev/dd
        <Progress :percent="25" />
        3.34GB 可用，共 200GB
      </div>
      <div>
        /dev/dd
        <Progress :percent="25" />
        3.34GB 可用，共 200GB
      </div>
    </div>

    <h2>服务器信息</h2>
    <table>
      <tr>
        <td class="name">服务器名称</td>
        <td class="value"> {{data.sysInfo.name}}</td>
        <td class="name">操作系统</td>
        <td class="value">{{data.sysInfo.osName}}</td>
      </tr>
      <tr>
        <td class="name">服务器 IP</td>
        <td class="value"> {{data.sysInfo.ip}}</td>
        <td class="name">系统架构</td>
        <td class="value">{{data.sysInfo.osArch}}</td>
      </tr>
    </table>

    <h2>处理器信息</h2>
    <table>
      <tr>
        <td class="name">物理处理器数量</td>
        <td class="value"> {{data.cupInfo.physicalProcessorCount}}</td>
        <td class="name">逻辑处理器数量</td>
        <td class="value">{{data.cupInfo.logicalProcessorCount}}</td>
      </tr>
      <tr>
        <td class="name">系统使用率</td>
        <td class="value"> {{(data.cupInfo.systemPercent * 100) +'%'}}</td>
        <td class="name">用户使用率</td>
        <td class="value">{{(data.cupInfo.userPercent * 100) + '%'}}</td>
      </tr>
    </table>

    <h2>内存信息</h2>
    <table>
      <tr>
        <td class="name">全部内存</td>
        <td class="value"> {{data.memoryInfo.total}}</td>
        <td class="name">已使用内存</td>
        <td class="value">{{data.memoryInfo.used}}</td>
      </tr>
      <tr>
        <td class="name">未使用内存</td>
        <td class="value"> {{data.memoryInfo.free}}</td>
        <td class="name">使用率</td>
        <td class="value">{{(data.memoryInfo.usePercent * 100).toFixed(2) + '%'}}</td>
      </tr>
    </table>

    <h2>JVM 信息</h2>
    <table>
      <tr>
        <td class="name">Java 运行时</td>
        <td class="value"> {{data.jvmInfo.jdkName}}</td>
        <td class="name">Java 版本</td>
        <td class="value">{{data.jvmInfo.jdkVersion}}</td>
      </tr>
      <tr>
        <td class="name">Java 架构</td>
        <td class="value"> {{data.jvmInfo.arch}}</td>
        <td class="name">Java 厂商</td>
        <td class="value">{{data.jvmInfo.vendor}}</td>
      </tr>
      <tr>
        <td class="name">最大内存</td>
        <td class="value"> {{data.jvmInfo.maxMemory}}</td>
        <td class="name">已用内存</td>
        <td class="value">{{data.jvmInfo.usedMemory}}</td>
      </tr>
      <tr>
        <td class="name">可用内存</td>
        <td class="value"> {{data.jvmInfo.freeMemory}}</td>
        <td class="name">内存使用率</td>
        <td class="value">{{data.jvmInfo.usePercent}}%</td>
      </tr>
      <tr>
        <td class="name">启动时间</td>
        <td class="value"> {{new Date(data.jvmInfo.startTime)}}</td>
        <td class="name">安装路径</td>
        <td class="value">{{data.jvmInfo.jdkHome}}</td>
      </tr>
    </table>

    <br />
    <br />
    <br />
  </div>

  <script>
    let TEST = {
      "cupInfo": {
        "physicalProcessorCount": 4,
        "logicalProcessorCount": 4,
        "systemPercent": 0.08,
        "userPercent": 0.06,
        "waitPercent": 0,
        "usePercent": 0.15
      },
      "memoryInfo": {
        "total": "11.89GB",
        "used": "8.5GB",
        "free": "3.39GB",
        "usePercent": 0.71
      },
      "diskInfos": null,
      "jvmInfo": {
        "jdkVersion": "1.8.0_181",
        "jdkHome": "C:\\Program Files\\Java\\jre1.8.0_181",
        "jdkName": "Java HotSpot(TM) 64-Bit Server VM",
        "jvmTotalMemory": "184MB",
        "maxMemory": "2.64GB",
        "freeMemory": "148.16MB",
        "usedMemory": "35.84MB",
        "usePercent": 0.19,
        "startTime": 1649682389913,
        "vendor": "Oracle Corporation",
        "arch": "amd64",
        "uptime": 1931
      },
      "sysInfo": {
        "name": "Old_i5",
        "ip": "169.254.70.213",
        "osName": "Windows 8.1",
        "osArch": "amd64",
        "userDir": "C:\\code\\aj-framework"
      },
      "diskUsePercent": 82.72
    };

    new Vue({
      el: '#system',
      data: {
        data: TEST
      },
      mounted() {
        this.load();
      },
      methods: {
        load() {
          let api = 'http://localhost:8302/system_info';

          aj.xhr.get(api, json => {
            console.log(json)
            this.data = json.data;
          });
        }
      }
    });
  </script>
</body>

</html>